<template>
  <div>
    <div class="head">
      <p class="text">更换背景</p>
      <van-icon
        @click="onClickLeft()"
        class="arrow"
        size="20"
        color="whitesmoke"
        name="arrow-left"
      />
    </div>
    <div class="con">
      <van-image
      class="img1"
        width="300"
        height="300"
        src="static/img/background.jpg"
      />
      <form>
        <input class="btn1" type="file" @change="getFile($event)" />
        <button @click="submit($event)">提交</button>
      </form>
      <!-- <van-button class="btn1" type="primary">选择图片</van-button> -->
    </div>
  </div>
</template>
<script>
export default {
    methods: {
        // 跳转到详细信息
    onClickLeft() {
      this.$router.push('/change');
    },
    // 上传
    getFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    submit(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append('file', this.file);
    //   axios
    //     .post('/api/pic/load', formData)
    //     .then((r) => {
    //       console.log(r);
    //       this.ruleForm.address = r.data.name;
    //     })
    //     .catch((err) => {
    //       alert('上传失败');
    //       console.log(err);
    //     });
    },
    },
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 4rem;
  background-color: rgb(108, 144, 243);
}
.text {
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  line-height: 4rem;
}
.arrow {
  position: relative;
  top: -3rem;
}
.con{
    position: relative;
}
.img1{
    position: relative;
    top: 5rem;
    left: 4rem;
}
.btn1{
    position: relative;
    top: 8.6rem;
    left: 10.5rem;
    width: 15rem;
}
</style>